<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const visitsChart = ref(null)
const sourceChart = ref(null)
const timeRange = ref('week')
const statisticsData = ref([
  { title: '总访问量', value: '12,846', icon: 'View', color: '#409EFF' },
  { title: '日均访问', value: '1,835', icon: 'Calendar', color: '#67C23A' },
  { title: '跳出率', value: '38%', icon: 'Back', color: '#E6A23C' },
  { title: '平均停留', value: '4分32秒', icon: 'Timer', color: '#F56C6C' }
])

onMounted(() => {
  // 初始化访问量趋势图
  const visitsChartInstance = echarts.init(visitsChart.value)
  visitsChartInstance.setOption({
    title: {
      text: '访问量趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      areaStyle: {}
    }]
  })

  // 初始化访问来源分析图
  const sourceChartInstance = echarts.init(sourceChart.value)
  sourceChartInstance.setOption({
    title: {
      text: '访问来源分析'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '社交媒体' },
        { value: 484, name: '外部链接' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  })

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    visitsChartInstance.resize()
    sourceChartInstance.resize()
  })
})
</script>

<template>
  <div class="visits-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col v-for="(item, index) in statisticsData" :key="index" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" :style="{ borderLeft: `4px solid ${item.color}` }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: item.color + '20' }">
              <el-icon :size="24" :color="item.color">
                <component :is="item.icon" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">{{ item.title }}</div>
              <div class="stat-value">{{ item.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>访问量趋势</span>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="visitsChart" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>访问来源分析</span>
            </div>
          </template>
          <div ref="sourceChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.visits-container {
  padding: 20px;
}

.chart-card {
  margin-bottom: 20px;
  height: 100%;
}

.chart {
  height: 400px;
  width: 100%;
}

.mt-20 {
  margin-top: 20px;
}

.stat-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  padding: 12px;
  border-radius: 8px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 